<template>
  <div class="box">
    <header class="header">
      <van-search v-model="value" show-action icon="search" @search="onSearch" >
        <template #left>
          <van-icon name="arrow-left" size="22" @click="$router.back()" />
        </template>
        <template #action>
          <van-icon name="list-switch" size="28" />
        </template>
      </van-search>
    </header>
    <main class="content">
      <!-- <van-tabs v-model:active="active">
        <van-tab title="综合">
          <ul>
            <li v-for="item in list" :key="item.id">
              <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </li>
          </ul>
        </van-tab>
        <van-tab title="销量">内容 2</van-tab>
        <van-tab title="价格">内容 3</van-tab>
        <van-tab title="筛选4">内容 4</van-tab>
      </van-tabs> -->
      <ul>
        <van-empty v-if="list.length==' '" description="无" />
            <li v-else v-for="item in list" :key="item.id">      
              <van-card
  num="2"
 :price="item.price"
  
  :title="item.title"
  :thumb="item.image"
/>
<!-- 6、当搜索列表为空时，处理无数据状态，展示占位图 -->
<div><img :src="item.image" alt=""></div>
<div  class="van-multi-ellipsis--l2" >{{ item.title }}</div>
<div>{{ item.price}}</div>
            </li>
          </ul>
          
    </main>
  </div>
</template>

<script setup>
 import {ref,onMounted} from 'vue'
 import request from '@/tool/request'
 const list=ref([])
 const value=ref('')
 const qurey=()=>{
  request.get('/search',{
    params:{
      value:value.value
    }
  }).then(res=>{
    if(res.data.code==200){
      
      
      list.value=res.data.data
    }
  })
 }
 onMounted(()=>{
  qury()
 })
 
 const pagination=ref(1)
//  , pageNUm
const qury=()=>{
  request.get('/list',{
  params:{
    pagination:pagination.value,
    pageNUm:40
  }
}).then(res=>{
  if(res.data.code==200){
    list.value=res.data.data
  }
})
 
}
const onSearch=()=>{
  qury()
 }

</script>

<style lang="scss" scoped>

</style>